<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>付费视频商城 | 商品详情页</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/comm.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="css/details.css">
</head>
<body>
<div id="app">
    <!--引入头部-->
    <div id="header"></div>
    <div style="clear: both"></div>
    <div class="video" id="video">
        <video width="70%" height="40%"  id="play" class="video-box" controls preload >
            <source src="video/movie.mp4" type="video/mp4">
            您的浏览器不支持 video 标签。
        </video> <div class="cha">×</div>
    </div>
    <div class="container after mar0">
               <div class="  box after">
                   <div class="d-left " style="min-height: 500px">
                       <div class="d-left-box after">
                           <div class="d-left-herder">
                               <nav>
                                   <span>首页  <span>/</span></span>
                                   <span>专业 <span>/</span></span>
                                   <span>油画 <span>/</span></span>
                                   <span>艺用解剖教程【免费】</span>
                               </nav>
                           </div>
                           <div class="after">
                               <div class="d-left-top-img after">
                                   <img src="img/page03.jpg" alt="">
                               </div>
                               <div class="d-left-top-font after">
                                   <h1 class="d-left-top-font-h">艺用解剖教程【免费】</h1>
                                   <div class="fg-div"></div>
                                   <div class="d-left-top-font-fire">
                                       免费
                                   </div>
                                   <div class="d-left-top-font-des">
                                       <p>绘画小白也能做设计？一步步教你人物手绘！</p>
                                       <p>  独立完成精美插画，不再是梦！</p>
                                       <p>专业名师一步步教你掌握时装手绘基础，让零基础的你也可以学会设计。</p>
                                   </div>
                                   <div class="d-left-top-font-btn after">
                                       <button id="btn">免费试听01-了解人体比例</button>
                                       <button><a href="shopping.html">登录之后观看</a></button>
                                   </div>
                                   <div class="d-left-top-font-p ">
                                   <span>
                                       分类：
                                   </span>
                                       <a  href="">油画</a>，
                                       <a  href="">入门</a>
                                   </div>
                               </div>
                           </div>

                           <div class="d-tabs ">
                               <div class="d-tabs-top">
                                   <span>描述</span>
                               </div>
                               <div class="d-tabs-font">
                                   <div class="d-tabs-font-top">课前准备</div>
                                   <div class="d-tabs-font-p">老师自编教材，上课时看课件屏幕即可，无需自备。</div>
                                   <div class="d-tabs-font-p">课前需准备：素描纸、水彩纸、铅笔（HB~3B、彩铅）、软硬橡皮、水彩画笔、水彩颜料、调色盘、留白液。另有排刷、色粉、洗笔桶，可根据个人需求确定是否购买。</div>
                                   <br>
                                   <div class="d-tabs-font-top">教学大纲</div>
                                   <div class="d-tabs-font-p p-br">
                                       <p>01-了解人体比例，掌握人体美免费试听</p>
                                       <p>02-掌握“眼睛”的画法免费试听</p>
                                       <p>03-掌握“鼻子、嘴巴”的画法</p>
                                       <p>04-掌握“头部”及“五官”的画法</p>
                                       <p>05-两种不同风格“头发”的画法</p>
                                       <p>06-掌握“手”的画法</p>
                                       <p>07-人物动态应该怎样展示</p>
                                       <p>08-如何在人体模特的基础上画服装？</p>
                                       <p>09-展现衣服的线条和褶皱</p>
                                       <p>10-绘画工具的介绍</p>
                                       <p>11-服装的色彩</p>
                                       <p>12-如何给服装上色？</p>
                                       <p>13-服装的花纹如何展现？</p>
                                       <p>14-服装质地的表现</p>
                                       <p>15-如何展现轻薄质地的服装？</p>
                                       <p>16-针织面料和牛仔面料衣服的画法（上）</p>
                                       <p>17-针织面料和牛仔面料衣服的画法（下）</p>
                                       <p>18-厚重面料和皮革面料的画法（上）</p>
                                       <p>19-厚重面料和皮革面料的画法（下）</p>
                                       <p>20-款式图和项目图</p></div>
                                   <br><br>
                               </div>

                               <div class="d-moble">
                                   <div class="d-modle-top">
                                       <span>相关视频</span>
                                   </div>
                                   <div class="d-modle-box">
                                       <div class="d-modle-box-img">
                                           <img src="img/page01.jpg" alt="">
                                           <div class="d-tabs-img-detail"><a href="shopping.html">素描石膏几何体【试看+购买】</a></div>
                                           <div class="d-tabs-img-sel">￥400.00</div>
                                       </div>
                                       <div class="d-modle-box-img">
                                           <img src="img/page02.jpg" alt="">
                                           <div class="d-tabs-img-detail"><a href="shopping.html">素描石膏几何体【试看+购买】</a></div>
                                           <div class="d-tabs-img-sel">￥400.00</div>
                                       </div>
                                       <div class="d-modle-box-img">
                                           <img src="img/page03.jpg" alt="">
                                           <div class="d-tabs-img-detail"><a href="shopping.html">素描石膏几何体【试看+购买】</a></div>
                                           <div class="d-tabs-img-sel">￥400.00</div>
                                       </div>
                                       <div class="d-modle-box-img">
                                           <img src="img/page04.jpg" alt="">
                                           <div class="d-tabs-img-detail"><a href="shopping.html">素描石膏几何体【试看+购买】</a></div>
                                           <div class="d-tabs-img-sel">￥400.00</div>
                                       </div>
                                   </div>
                               </div>
                           </div>
                       </div>
                   </div>
                   <div class="d-right" style="min-height: 500px">
                           <div class="d-detail-box">
                               <div class="d-detail-box-box">
                                   <div class="d-detail-box-img">
                                       <img src="img/page10.jpg" alt="">
                                   </div>
                                   <div class="d-detail-font">中国画人物【试看+购买】</div>
                                   <div class="d-detail-de">理论不再枯燥，基础也可以很有趣~老师自编教材，上课时看课件屏幕即可，无需自备</div>
                                   <div class="d-detail-sel">¥400.00</div>
                               </div>
                           </div>
                           <div class="d-detail-box">
                               <div class="d-detail-box-box">
                                   <div class="d-detail-box-img">
                                       <img src="img/page10.jpg" alt="">
                                   </div>
                                   <div class="d-detail-font">中国画人物【试看+购买】</div>
                                   <div class="d-detail-de">理论不再枯燥，基础也可以很有趣~老师自编教材，上课时看课件屏幕即可，无需自备</div>
                                   <div class="d-detail-sel">¥400.00</div>
                               </div>
                           </div>
                       <div class="d-detail-box">
                           <div class="d-detail-box-box">
                               <div class="d-detail-box-img">
                                   <img src="img/page10.jpg" alt="">
                               </div>
                               <div class="d-detail-font">中国画人物【试看+购买】</div>
                               <div class="d-detail-de">理论不再枯燥，基础也可以很有趣~老师自编教材，上课时看课件屏幕即可，无需自备</div>
                               <div class="d-detail-sel">¥400.00</div>
                           </div>
                       </div>
                       <div class="d-detail-box">
                           <div class="d-detail-box-box">
                               <div class="d-detail-box-img">
                                   <img src="img/page10.jpg" alt="">
                               </div>
                               <div class="d-detail-font">中国画人物【试看+购买】</div>
                               <div class="d-detail-de">理论不再枯燥，基础也可以很有趣~老师自编教材，上课时看课件屏幕即可，无需自备</div>
                               <div class="d-detail-sel">¥400.00</div>
                           </div>
                       </div>
                       <div class="d-detail-box">
                           <div class="d-detail-box-box">
                               <div class="d-detail-box-img">
                                   <img src="img/page10.jpg" alt="">
                               </div>
                               <div class="d-detail-font">中国画人物【试看+购买】</div>
                               <div class="d-detail-de">理论不再枯燥，基础也可以很有趣~老师自编教材，上课时看课件屏幕即可，无需自备</div>
                               <div class="d-detail-sel">¥400.00</div>
                           </div>
                       </div>
                       <div class="d-detail-box">
                           <div class="d-detail-box-box">
                               <div class="d-detail-box-img">
                                   <img src="img/page10.jpg" alt="">
                               </div>
                               <div class="d-detail-font">中国画人物【试看+购买】</div>
                               <div class="d-detail-de">理论不再枯燥，基础也可以很有趣~老师自编教材，上课时看课件屏幕即可，无需自备</div>
                               <div class="d-detail-sel">¥400.00</div>
                           </div>
                       </div>
                   </div>
               </div>
       </div>

    <!--引入底部-->
    <div id="footer"></div>
</div>

</body>
<script>
    $("#btn").click(function () {
        $("#video").show()
    })
    $(".cha").click(function () {/*关闭播放框*/
        $("#video").hide()
        console.log('关闭')
        var play = document.getElementById("play")
       play.pause() /*停止播放*/
    })
     //使用ajax引入静态页面
     $(function(){
        $.ajax({
            url:"header.html",
            context:document.body,
             success: function(sView){
           $("#header").append($(sView));      
        }});
        $.ajax({
            url:"footer.html",
            context:document.body,
             success: function(sView){
           $("#footer").append($(sView));          
        }});
    })

</script>
</html>